<!DOCTYPE html>
<html>
<head>
	<title>animation</title>
	<link rel="stylesheet" type="text/css" href="./animate.css">
	<style type="text/css">
		#ani-target{
			text-align:center;
			font-size:100px;
			line-height:600px;
			padding:50px;
		}
	</style>
</head>
<body>
<div style="text-align:center;">
	<label>选择动画</label>
	<select id="ani">
	</select>
</div>
<div id="ani-target">animate.css</div>

<script type="text/javascript" src="./jquery.js"></script>
<script>
	var animatestr=`bounce	flash	pulse	rubberBand
				shake	headShake	swing	tada
				wobble	jello	bounceIn	bounceInDown
				bounceInLeft	bounceInRight	bounceInUp	bounceOut
				bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
				fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
				fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
				fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
				fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
				fadeOutUp	fadeOutUpBig	flipInX	flipInY
				flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
				rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
				rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
				rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
				rollIn	rollOut	zoomIn	zoomInDown
				zoomInLeft	zoomInRight	zoomInUp	zoomOut
				zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
				slideInDown	slideInLeft	slideInRight	slideInUp
				slideOutDown	slideOutLeft	slideOutRight	slideOutUp`;
	var animate= animatestr.split(/\s+/);
	animate.forEach(function(item){
		$('#ani').append(`<option value=${item}>${item}</option>`);	
	})
	$('#ani').on('change',function(){
		$('#ani-target').removeClass().addClass($('#ani').val()).addClass('animated')
	})
		
</script>
</body>
</html>